<template>
	<view>
		<!-- 列表平铺两列三列 -->
		<view
			class="padding-10 margin-10 bg-white border-radius-18"
			v-if="(asData.parameters.column == '2' && asData.parameters.display == 'list') || (asData.parameters.column == '3' && asData.parameters.display == 'list')"
		>
			<view class="flex align-center flex-direction-row justify-between min-height-30" v-if="asData.parameters.lookTitle == true">
				<view class="fsize-16 text-black fweight-600">
					{{ asData.parameters.title }}
				</view>
				<u-icon
					name="arrow-right-double"
					size="12"
					label="查看更多"
					labelSize="12"
					labelPos="left"
					v-if="asData.parameters.lookMore == true"
					@click="goGoodsList({ catId: asData.parameters.classifyId, brandId: asData.parameters.brandId })"
				></u-icon>
			</view>
			<view class="coreshop-divider">
				<view class="complete"></view>
			</view>
			<view class="coreshop-text-black">
				<custom-waterfalls-flow :value="asData.parameters.list" :column="asData.parameters.column" @wapperClick="wapperClick" @imageClick="imageClick">
					<!-- #ifdef MP-WEIXIN -->
					<view class="goods pb-10 bg-main" v-for="(item, index) in asData.parameters.list" :key="index" slot="slot{{index}}">
						<view class="pt-6 pb-3 pl-8 pr-8 bg-main border-radius-bl-18">
							<view class="multiple-line-clamp">
								<text class="fsize-14">{{ item.name }}</text>
							</view>
							<view class="mt-8 flex justify-between align-center mb-5">
								<view class="coreshop-text-red fsize-weight-bold">
									<text class="fsize-12">¥</text>
									<text class="fsize-16">{{ item.price }}</text>
									<span class="fsize-xs coreshop-text-through ml-6 coreshop-text-gray" v-if="asData.parameters.column == 2">{{ item.mktprice }}元</span>
								</view>
								<view>
									<text class="fsize-10 coreshop-text-gray">已售{{ item.buyCount + item.initialSales }}{{ item.unit }}</text>
								</view>
							</view>
							<!-- <view class="coreshop-divider"
								v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
								<view class="complete"></view>
							</view>
							<view class="coreshop-flex fsize-11 mt-10 mb-5"
								:class="asData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'"
								v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
								<view>
									{{ pointShowName}}兑换价:
								</view>
								<view class="coreshop-text-red">
									{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
								</view>
							</view> -->
							<view
								class="coreshop-flex coreshop-flex-direction-row fsize-11 mt-5 mb-5"
								v-if="pointSwitch == 1 && pointGetModel == 2 && pointShowPoint == 1 && item.points > 0"
							>
								<view>购买赠送:</view>
								<view class="coreshop-text-red">{{ item.points }}{{ pointShowName }}</view>
							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="goods">
							<view class="padding-top-6 padding-bottom-3 padding-left-8 padding-right-8 bg-white coreshop-border-radius-bl-18">
								<view class="coreshop-multiple-line-clamp">
									<text class="fsize-14">{{ item.name }}</text>
								</view>
								<view class="mt-8 coreshop-flex coreshop-justify-between coreshop-align-center mb-5">
									<view class="coreshop-text-red fsize-weight-bold">
										<text class="fsize-12">¥</text>
										<text class="fsize-16">{{ item.price }}</text>
										<span class="fsize-xs coreshop-text-through ml-6 coreshop-text-gray" v-if="asData.parameters.column == 2">{{ item.mktprice }}元</span>
									</view>
									<view>
										<text class="fsize-10 coreshop-text-gray">已售{{ item.buyCount + item.initialSales }}{{ item.unit }}</text>
									</view>
								</view>
								<!-- <view class="coreshop-divider"
									v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
									<view class="complete"></view>
								</view>
								<view class="coreshop-flex fsize-11 mt-10 mb-5"
									:class="asData.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'"
									v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
									<view>
										{{ pointShowName}}兑换价:
									</view>
									<view class="coreshop-text-red">
										{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
									</view>
								</view> -->
								<view
									class="coreshop-flex coreshop-flex-direction-row fsize-11 mt-5 mb-5"
									v-if="pointSwitch == 1 && pointGetModel == 2 && pointShowPoint == 1 && item.points > 0"
								>
									<view>购买赠送:</view>
									<view class="coreshop-text-red">{{ item.points }}{{ pointShowName }}</view>
								</view>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			</view>
		</view>

		<!-- 列表平铺单列 -->
		<view class="padding-10 margin-10 bg-white coreshop-border-radius-trbl-18" v-if="asData.parameters.column == '1' && asData.parameters.display == 'list'">
			<view
				class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30"
				v-if="asData.parameters.lookTitle == 'true'"
			>
				<view class="fsize-16 coreshop-text-black fsize-weight-bold">
					{{ asData.parameters.title }}
				</view>
				<u-icon
					name="arrow-right-double"
					size="12"
					label="查看更多"
					labelSize="12"
					labelPos="left"
					v-if="asData.parameters.lookMore == 'true'"
					@click="goGoodsList({ catId: asData.parameters.classifyId, brandId: asData.parameters.brandId })"
				></u-icon>
			</view>
			<view class="coreshop-divider">
				<view class="complete"></view>
			</view>
			<view class="coreshop-text-black" v-for="(item, index) in asData.parameters.list" :key="index" v-if="count" @click="goGoodsDetail(item.id)">
				<view class="coreshop-flex coreshop-justify-start padding-top-10 padding-bottom-10">
					<view>
						<u--image :src="item.image" mode="widthFix" width="100%" radius="8"></u--image>
					</view>
					<view class="coreshop-flex coreshop-flex-direction padding-left-10 coreshop-percent-100">
						<view class="fsize-14 u-line-2 coreshop-text-black">{{ item.name }}</view>
						<view class="fsize-11 padding-top-5 padding-bottom-3 u-line-2 coreshop-text-brown">
							{{ item.brief }}
						</view>
						<view class="coreshop-flex coreshop-align-center padding-top-10 padding-bottom-10">
							<view class="fsize-11 bg-orange padding-2 coreshop-border-radius-4 mr-10">已售{{ item.buyCount + item.initialSales }}{{ item.unit }}</view>
							<view class="fsize-11 bg-olive padding-2 coreshop-border-radius-4">{{ item.viewCount }}人访问</view>
						</view>
						<view class="coreshop-flex coreshop-justify-between coreshop-flex-direction-row coreshop-align-center">
							<view class="coreshop-flex coreshop-align-center">
								<view class="fsize-14 coreshop-text-red">￥{{ item.price }}</view>
								<view class="fsize-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
							</view>
							<view class="coreshop-buy-btn">马上抢</view>
						</view>
					</view>
					<!-- <view class="coreshop-flex coreshop-flex-direction-row fsize-11 mt-5"
						v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
						<view>
							{{ pointShowName}}兑换价:
						</view>
						<view class="coreshop-text-red">
							{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
							元
						</view>
					</view> -->
					<view class="coreshop-flex coreshop-flex-direction-row fsize-11 mt-5" v-if="pointSwitch == 1 && pointGetModel == 2 && pointShowPoint == 1 && item.points > 0">
						<view>购买赠送:</view>
						<view class="coreshop-text-red">{{ item.points }}{{ pointShowName }}</view>
					</view>
				</view>
			</view>
			<view class="order-none" v-else>
				<u-empty :icon="$globalConstVars.apiFilesUrl + '/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty>
			</view>
		</view>

		<!-- 横向滚动 -->
		<view class="padding-10 margin-10 bg-white coreshop-border-radius-trbl-18" v-if="asData.parameters.display == 'slide'">
			<view
				class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30"
				v-if="asData.parameters.lookTitle == 'true'"
			>
				<view class="fsize-16 coreshop-text-black fsize-weight-bold">
					{{ asData.parameters.title }}
				</view>
				<u-icon
					name="arrow-right-double"
					size="12"
					label="查看更多"
					labelSize="12"
					labelPos="left"
					v-if="asData.parameters.lookMore == 'true'"
					@click="goGoodsList({ catId: asData.parameters.classifyId, brandId: asData.parameters.brandId })"
				></u-icon>
			</view>
			<view class="coreshop-divider">
				<view class="complete"></view>
			</view>
			<view v-if="count">
				<swiper :class="asData.parameters.column == 3 ? 'swiper3' : asData.parameters.column == 2 ? 'swiper2' : ''" @change="change">
					<swiper-item v-for="(no, indexPage) of pageCount" :key="indexPage">
						<u-grid :col="asData.parameters.column" :border="false" align="left" :data-id="no">
							<u-grid-item
								v-for="(item, index) in asData.parameters.list"
								v-if="index >= asData.parameters.column * no && index < asData.parameters.column * (no + 1)"
								:key="index"
								@click="goGoodsDetail(item.id)"
							>
								<view class="good_box">
									<u-image
										:src="item.image"
										:index="item.id"
										mode="widthFit"
										width="100%"
										:height="asData.parameters.column == 3 ? '104px' : asData.parameters.column == 2 ? '164px' : '104px'"
										radius="10"
									></u-image>
									<view class="good_title u-line-2">
										{{ item.name }}
									</view>
									<view class="good-price coreshop-display-block">
										{{ item.price }}元
										<span class="fsize-xs coreshop-text-through ml-5 coreshop-text-gray">{{ item.mktprice }}元</span>
									</view>
									<view class="good-tag-recommend" v-if="item.isRecommend">推荐</view>
									<view class="good-tag-hot" v-if="item.isHot">热门</view>
									<!-- <view class="coreshop-flex coreshop-flex-direction-row fsize-11 mt-5"
										v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
										<view>
											{{ pointShowName}}兑换价:
										</view>
										<view class="coreshop-text-red">
											{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
											元
										</view>
									</view> -->
									<view
										class="coreshop-flex coreshop-flex-direction-row fsize-11 mt-5"
										v-if="pointSwitch == 1 && pointGetModel == 2 && pointShowPoint == 1 && item.points > 0"
									>
										<view>购买赠送:</view>
										<view class="coreshop-text-red">{{ item.points }}{{ pointShowName }}</view>
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
				<view class="indicator-dots">
					<view class="indicator-dots-item" v-for="(no, index) of pageCount" :key="index" :class="[current == no ? 'indicator-dots-active' : '']"></view>
				</view>
			</view>
			<view v-else="">
				<scroll-view class="swiper-list" scroll-x="true"></scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			pageCount: [],
			count: false
		};
	},
	name: 'Goods',
	props: {
		asData: {
			// type: Array,
			required: true
		}
	},
	computed: {
		pointSwitch() {
			// return this.$store.state.config.pointSwitch
			return 1;
		},
		pointShowExchangePrice() {
			// return this.$store.state.config.pointShowExchangePrice
			return 1;
		}
		// pointDiscountedProportion() {
		// 	return this.$store.state.config.pointDiscountedProportion
		// },
		// pointExchangeModel() {
		// 	return this.$store.state.config.pointExchangeModel
		// },
		// pointShowName() {
		// 	return this.$store.state.config.pointShowName
		// },
		// pointGetModel() {
		// 	return this.$store.state.config.pointGetModel
		// },
		// pointShowPoint() {
		// 	return this.$store.state.config.pointShowPoint
		// },
	},
	methods: {
		change(e) {
			this.current = e.detail.current;
		},
		wapperClick(item) {
			this.goGoodsDetail(item.id);
		},
		imageClick(item) {
			this.goGoodsDetail(item.id);
		}
	},
	created() {
		this.count = this.asData.parameters.list.length > 0;
		var page = Number(this.asData.parameters.list.length / this.asData.parameters.column).toFixed(0);
		if (this.asData.parameters.column * page < this.asData.parameters.list.length) {
			page = Number(page) + 1;
		}
		for (var i = 0; i < page; i++) {
			this.pageCount.push(i);
		}
	}
};
</script>

<style scoped lang="scss">
.good_box {
	border-radius: 8px;
	background-color: #ffffff;
	padding: 5px;
	position: relative;
	width: 100%;

	.good_title {
		font-size: 14px;
		margin-top: 5px;
		color: $u-main-color;
	}

	.good-tag-hot {
		display: flex;
		margin-top: 5px;
		position: absolute;
		top: 7.5px;
		left: 7.5px;
		background-color: $u-type-error;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 2px 7px;
		border-radius: 25px;
		font-size: 10px;
		line-height: 1;
	}

	.good-tag-recommend {
		display: flex;
		margin-top: 5px;
		position: absolute;
		top: 7.5px;
		right: 7.5px;
		background-color: $u-type-primary;
		color: #ffffff;
		margin-left: 10px;
		border-radius: 25px;
		line-height: 1;
		padding: 2px 7px;
		display: flex;
		align-items: center;
		border-radius: 25px;
		font-size: 10px;
	}

	.good-tag-recommend2 {
		display: flex;
		margin-top: 5px;
		position: absolute;
		bottom: 7.5px;
		left: 7.5px;
		background-color: $u-type-primary;
		color: #ffffff;
		border-radius: 25px;
		line-height: 1;
		padding: 2px 7px;
		display: flex;
		align-items: center;
		border-radius: 25px;
		font-size: 10px;
	}

	.good-price {
		font-size: 15px;
		color: $u-type-error;
		margin-top: 5px;
	}
}

.indicator-dots {
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: $u-type-primary;
	}
}

.swiper3 {
	height: 200px;
}

.swiper2 {
	height: 270px;
}

.image2 {
	height: 150px;
}

.image3 {
	height: 150px;
}
</style>
